<template>
  <div class="page-login"
       :style="{backgroundImage: `url('${loginInfo.bg}')`}">
    <div class="login-box">
      <form class="login-form">
        <slot name="loginType">
          &nbsp;&nbsp;
        </slot>
        <div class="login-form-item">
          <login-form-input placeholder="请输入登录账号"
                            icon="icon-login-zhanghao"
                            class="animated"
                            :class="{'shake invalid': !validate.account.valid}"
                            :maxlength="20"
                            v-model="entity.account"
                            @blur="onBlurAccount"
                            @enter="login"
                            ref="account"/>
        </div>
        <div class="login-form-item">
          <login-form-input type="password"
                            placeholder="请输入登录密码"
                            icon="icon-login-mima"
                            class="animated"
                            :class="{'shake invalid': !validate.password.valid}"
                            :maxlength="20"
                            v-model="entity.password"
                            @blur="onBlurPassword"
                            @enter="login"/>
        </div>
        <!--        <div class="login-form-item">-->
        <!--          <div class="login-form-code">-->
        <!--            <div class="code-img"-->
        <!--                 @click="clickQRCode">-->
        <!--              <img :src="qrCodeUrl">-->
        <!--            </div>-->
        <!--            <login-form-input placeholder="请输入验证码"-->
        <!--                              icon="icon-login-yanzhengma"-->
        <!--                              class="animated"-->
        <!--                              :class="{'shake invalid': !validate.qrCode.valid}"-->
        <!--                              :maxlength="4"-->
        <!--                              v-model="entity.code"-->
        <!--                              @blur="onBlurQRCode"-->
        <!--                              @enter="login"-->
        <!--                              ref="qrCode"/>-->
        <!--          </div>-->
        <!--        </div>-->
        <div class="login-form-item">
          <a-button type="primary"
                    class="login-form-btn animated"
                    @click="login">登录
          </a-button>
        </div>
        <div class="login-form-item">

        </div>
      </form>
    </div>
    <!--<div class="login-footer">
      技术支持：{{loginInfo.technicalSupport}} (推荐使用谷歌浏览器、火狐浏览器以及360极速浏览器)
      <br />
      网站ICP备案号：{{loginInfo.caseNumber}} Copyright {{loginInfo.copyRight}} 版权所有
    </div>-->
  </div>
</template>

<script lang="ts">
  import { Component, Vue, Model, Prop, Emit } from 'vue-property-decorator'
  import { Action } from 'vuex-class'
  import LoginFormInput from '@/components/packages/login/loginFormInput/index.vue'
  import loading from '@/components/libs/loading'
  import {
    loginRememberMeLocal,
    loginAccountLocal,
    broadcastLoginLocal,
    frameActiveMenuSession,
    adminInfoSession,
    macKeyCookie,
    frameMenuSession
  } from '@/storage'
  import { loginInfo } from '@/config'
  import { redirectToHome } from '@/router'
  import * as actionTypes from '@/store/actionTypes'
  import UserService from '@/feign/user/UserService'
  import { message } from 'ant-design-vue'
  import { menuList } from '@/pages/frame/src/menuList'


  @Component({
    components: {
      LoginFormInput
    }
  })
  export default class Login extends Vue {
    // 登录参数
    private entity = {
      account: '',
      password: '',
      qrCode: '',
      code: '',
      type: 3,
      randomIndex: '',
      codeIndex: ''
    } // = new HomeLoginParam()
    // 校验
    private validate = {
      account: {
        valid: true
      },
      password: {
        valid: true
      },
      qrCode: {
        valid: true
      }
    }
    // 记住我
    private rememberMe: boolean = loginRememberMeLocal.get() === 'true'
    // 验证码图片
    private qrCodeUrl = ''
    // 登录页相关信息
    private loginInfo = loginInfo

    private loginBroadIndex = -1

    @Action(actionTypes.AFTER_LOGIN)
    private afterLogin: any

    private created() {
      frameMenuSession.remove()
      frameActiveMenuSession.remove()
      this.refreshQRCode()

      // 注册登录广播事件
      this.loginBroadIndex = broadcastLoginLocal.onBroadcast(() => {
        location.reload()
      })
    }

    private mounted() {
      this.$nextTick(() => {
        const accountRef = this.$refs.account as LoginFormInput
        accountRef.focus()
      })
    }

    private destroyed() {
      broadcastLoginLocal.offBroadcast(this.loginBroadIndex)
    }

    // 登录
    private async login() {
      if (this.validateAccount() && this.validatePassword()) {
        const entity = Object.assign({}, this.entity)
        loading.show()
        try {
          // 调用登录服务
          const loginBo = await UserService.login({
            username: this.entity.account,
            password: this.entity.password
          })
          if (!loginBo) {
            this.warning('暂无权限，请联系管理员')
          } else {
            this.resetRememberMe(entity.account)
            this.afterLogin(loginBo)
            adminInfoSession.setJSON(loginBo)
            macKeyCookie.set(loginBo.token)
            broadcastLoginLocal.random()
            frameMenuSession.setJSON(menuList)
            redirectToHome()
          }
        } catch (e) {
          console.log(e)
          this.refreshQRCode()
        }
        loading.hide()
      }
    }

    // 点击验证码图片时，刷新验证码
    private clickQRCode() {
      this.refreshQRCode()
      this.entity.code = ''
      if (this.$refs.qrCode) {
        const qrCode = this.$refs.qrCode as any
        qrCode.select()
      }
    }

    // 刷新验证码
    private refreshQRCode() {
      // AccountApi.getVerificationCode().then(data => {
      //   this.entity.codeIndex = data.index
      //   this.qrCodeUrl = /^data/i.test(data.code) ? data.code : `data:image/png;base64,${data.code}`
      // })
    }

    // 校验账号
    private validateAccount(account: string = this.entity.account) {
      return (this.validate.account.valid = !!account)
    }

    // 校验密码
    private validatePassword(password: string = this.entity.password) {
      return (this.validate.password.valid = !!password)
    }

    // 校验验证码
    private validateQRCode(qrCode: string = this.entity.code) {
      return (this.validate.qrCode.valid = !!qrCode && /^.{4}$/.test(qrCode))
    }

    private onBlurAccount() {
      this.validateAccount(this.entity.account)
    }

    private onBlurPassword() {
      this.validatePassword(this.entity.password)
    }

    private onBlurQRCode() {
      this.validateQRCode(this.entity.code)
    }

    // 重新设置[记住我]
    private resetRememberMe(account: string) {
      const rememberMe = this.rememberMe
      // loginRememberMeLocal.set(rememberMe)
      if (rememberMe) {
        loginAccountLocal.set(account)
      } else {
        loginAccountLocal.remove()
      }
    }

    // 账号输入框获得焦点
    private focusAccount() {
      if (this.$refs.account) {
        const accountRef = this.$refs.account as LoginFormInput
        accountRef.focus()
        accountRef.select()
      }
    }

  }
</script>
<style scoped lang="scss">
  .login-form-footer {
    font-size: 14px;

    a {
      color: #2897ff;
    }
  }
</style>
